<template>
    <div class="custom-empty">
        <img src="@/assets/Lw/no-data.png" alt="" />
        <div class="desc">
            {{ noDataText }}
        </div>
        <div class="operate">
            请点击
            <div>
                「
                <span class="add" v-if="isOperate" @click="hdlChange">
                    <PlusOutlined class="icon" v-if="showAddIcon" />{{
                        operateText
                    }}
                </span>
                」
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { PlusOutlined } from "@ant-design/icons-vue";
    const props = withDefaults(
        defineProps<{
            noDataText?: string;
            showAddIcon?: boolean;
            operateText?: string;
            isOperate?: boolean;
        }>(),
        {
            noDataText: "暂无数据",
            showAddIcon: true,
            operateText: "添加",
            isOperate: true,
        },
    );

    const { noDataText, showAddIcon, operateText } = toRefs(props);

    const emit = defineEmits(["change"]);

    const hdlChange = () => {
        emit("change");
    };
</script>

<style lang="scss" scoped src="./CustomEmpty.scss"></style>
